<template>
    <div>
        <a-button class="add_btn">
            <router-link to="AddDishPage">添加商品</router-link>
        </a-button>
        <a-table :data-source="dataSource" :pagination="pagination" :columns="columns">
            <template #customFilterDropdown="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }">
                <div style="padding: 8px;">
                    <a-input-search
                            ref="searchInput"
                            :placeholder="`请输入${column.title}`"
                            style="width: 188px; margin-bottom: 8px; display: block"
                            @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
                            @search="handleSearch(selectedKeys, confirm, column.dataIndex)"
                    />
                </div>
            </template>
            <template #customFilterIcon="{ filtered }">
                <search-outlined :style="{ color: filtered ? '#108ee9' : undefined }"/>
            </template>
            <template #bodyCell="{ text, column,record }">
                <template v-if="column.dataIndex === 'status'">
                    <div v-if="text==='COMMON'">
                        <span><a-badge status="processing"/>正常</span>
                    </div>
                    <div v-else>
                        <span><a-badge status="default"/>已下架</span>
                    </div>
                </template>
                <template v-if="column.dataIndex === 'imagePath'">
                    <a v-if="text!='' && text!=null" @click="showImage(text)">查看图片</a>
                    <span v-else>暂无图片</span>
                    <a-modal style="text-align: center;" @cancel="hideImage" :footer="null"
                             :visible="modalVisible">
                        <img style="width: 100%;"
                             :src="imagePath"
                             alt="暂无图片"/>
                    </a-modal>
                </template>
                <template v-else-if="column.dataIndex === 'operation'">
                    <div style="display: flex;justify-content: space-around">
                        <form-outlined @click="toUpdateDish(record.id)"/>
                        <a-popconfirm @confirm="takeDownDish(record.id)" v-if="record.status==='COMMON'"
                                      title="确认下架此商品">
                            <delete-outlined/>
                        </a-popconfirm>
                        <a-popconfirm @confirm="pullOnDish(record.id)" v-else title="确认商品上架">
                            <redo-outlined/>
                        </a-popconfirm>
                    </div>
                </template>
                <template v-else-if="column.dataIndex === 'productCode'">
                    <span style="color: rgb(212, 214, 217)" v-if="record.productCode==null || record.productCode===''">
                        无
                    </span>
                    <span v-else>
                        {{record.productCode}}
                    </span>
                </template>
                <span v-if="state.searchText && state.searchedColumn === column.dataIndex">
        <template
                v-for="(fragment, i) in text.toString().split(new RegExp(`(?<=${state.searchText})|(?=${state.searchText})`, 'i'))">
          <mark v-if="fragment.toLowerCase() === state.searchText.toLowerCase()" :key="i" class="highlight">
            {{ fragment }}
          </mark>
          <template v-else>{{ fragment }}</template>
        </template>
      </span>
            </template>
        </a-table>
        <div style="float: right">共&nbsp;{{totalCount}}&nbsp;条</div>
    </div>
</template>

<script>
    import {request} from "@/utils/request";
    import api from "@/constants/api";
    import StandardTableList from "../../components/StandardTableList"
    import {message} from 'ant-design-vue';

    export default {
        name: "DishPage",
        components: {
            StandardTableList
        },
        data() {
            return {
                columns: [
                    {
                        title: "商品编号",
                        dataIndex: "productCode",
                        key: "productCode",
                    },
                    {
                        title: "商品名称",
                        dataIndex: "name",
                        key: "name",
                        customFilterDropdown: true,
                        onFilter: (value, record) => record.name.toString().toLowerCase().includes(value.toLowerCase()),
                    },
                    {
                        title: "商品类目",
                        dataIndex: "type",
                        key: "type",
                    },
                    {
                        title: "商品价格",
                        dataIndex: "price",
                        key: "price",
                    },
                    {
                        title: "商品图片",
                        dataIndex: "imagePath",
                        key: "imagePath",
                    },
                    {
                        title: "商品状态",
                        dataIndex: "status",
                        key: "status",
                    },
                    {
                        title: '操作',
                        dataIndex: 'operation',
                        key: "operation",
                    }
                ],
                pagination: {
                    size: "small",
                    showSizeChanger: true,
                    showQuickJumper: true
                },
                totalCount: 0,
                dataSource: [],
                state: {
                    searchText: '',
                    searchedColumn: '',
                },
                modalVisible: false,
                visible: false,
                imagePath: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
            }
        },
        mounted() {
            this.getProductList();
        },
        methods: {
            getProductList() {
                request({
                    url: api.GET_PRODUCT_LIST,
                    method: "GET",
                }).then(res => {
                    this.dataSource = res;
                    this.totalCount = res.length;
                })
            },

            onShowSizeChange(current, pageSize) {

            },

            handleSearch(selectedKeys, confirm, dataIndex) {
                confirm();
                this.state.searchText = selectedKeys[0];
                this.state.searchedColumn = dataIndex;
            },
            showImage(imagePath) {
                this.imagePath = imagePath;
                this.modalVisible = true
            },
            hideImage() {
                this.modalVisible = false
            },
            toUpdateDish(id) {
                this.$router.push({
                    name: "UpdateDishPage", query: {id: id}
                })
            },
            takeDownDish(id) {
                this.visible = false;
                request({
                    url: api.DEAL_PRODUCT,
                    params: {
                        id: id,
                        status: "TAKEDOWN"
                    },
                    pureData: false
                }).then(res => {
                    if (res.code === 200) {
                        message.success(res.message);
                    }
                    this.getProductList();
                })
            },

            pullOnDish(id) {
                request({
                    url: api.DEAL_PRODUCT,
                    params: {
                        id: id,
                        status: "COMMON"
                    },
                    pureData: false
                }).then(res => {
                    if (res.code === 200) {
                        message.success(res.message);
                    }
                    this.getProductList();
                })
            }
        }
    }
</script>

<style scoped>
    .add_btn {
        margin-bottom: 20px;
        float: right;
        margin-right: 20px;
    }

    .pagination {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-left: 70%;
        margin-top: 20px;
    }
</style>